<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
        html{
            height:100%;
        }
        body{
            height:100%;
        }
        #app{
            margin-top: 10px;
            margin-left: 30px;
            width:100%;
            height:100%;
        }
        .showbookframe{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
        }
        .showbook{
            height: 230px;
            width: 150px;
            margin-bottom: 15px;
            margin-right: 20px;
            border-radius: 2px;
            background-color: #fff;
            box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, .05);
            -webkit-box-shadow: #d4d2d2 0px 0px 10px;
            -moz-box-shadow: #d4d2d2 0px 0px 10px;
        }
        .info{
            padding-left: 3px;
            width: 150px;
            height: 20px;
        }

    </style>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">

</head>
<body style="overflow-x: hidden;overflow-y: hidden">
<div id="app">
    <div class="head">
        <span style="display: inline; margin-right: 10px;margin-top: 10px;font-size: large;font-weight: bold">书籍一览</span>
        <a style="display: inline;font-size: small;text-decoration: none" href="books.html">更多></a>
        <hr/>
    </div>
    <div class="showbookframe">
        <div class="showbook" v-for="item in page.list":key="item.b_id">
            <img v-if="item.cover" :src="'bookcover?filename='+item.cover" style="height: 180px;width: 150px"></br>
            <div class="info">
                <a href="#" style="text-decoration: none;font-size: small;padding-top: 0;padding-left: 1px" @click="showinfo(item)">{{item.b_name}}</a>
                <div style="font-size: small;padding-top: 0;padding-left: 1px">{{item.author}}</div>
            </div>
        </div>
    </div>

    <nav style="margin-top: 30px">
        <ul class="pagination" style="display: flex;align-items: center;">
            <li class="page-item"><a class="page-link" href="#" @click.prevent="goPage(1)" >首页</a></li>
            <li class="page-item"><a class="page-link" href="#" @click.prevent="goPage(page.pre)">上页</a></li>
            <li class="page-item"><a class="page-link" href="#" @click.prevent="goPage(page.next)" >下页</a></li>
            <li class="page-item"><a class="page-link" href="#" @click.prevent="goPage(page.last)">尾页</a></li>
        </ul>
    </nav>


</div>

<script src="js/jquery-3.6.0.slim.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/vue.global.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/my-axios.js"></script>
<script src="layer/layer.js"></script>

<script>
    const app = {
        data() {
            return{
                query:{
                    pageNum:1,
                    pageSize:14,
                    author:'',
                    b_id:'',
                    b_name:'',
                    cover:'',
                    lender:'',
                    u_name:'',
                    press:'',
                    status:0
                },

                page:{},//分页对象

            };
        },

        methods: {
            showinfo(item){
                layer.open({
                    type: 1,
                    skin: 'layui-layer-rim', //加上边框
                    area: ['420px', '240px'], //宽高
                    content: "书名："+item.b_name+"</br>作者："+item.author+"</br>出版社："+item.press
                    +"</br>贡献者："+item.u_name
                });
            },

            goPage(pageNum,pageSize){
                if(pageNum){
                    this.query.pageNum = pageNum;
                    if(pageSize){
                        this.query.pageSize = pageSize;
                    }
                }else{
                    this.query.pageNum = 1;
                }

                this.getBookList();
            },

            getBookList(){
                const loadIdx = layer.load(0,{
                    success:()=>{//等待加载提示显示出来后，再加载数据，这样可以避免加载提示一直在转圈圈。
                        //加载数据
                        myAxios.get('/homecontent/bookList',{params:this.query}).then((response) => {
                            layer.close(loadIdx);
                            this.page = response.data.data;
                            console.log(this.page);
                            this.query.pageNum = this.page.current;//用服务端数据校正客户端数据参数
                            this.query.pageSize = this.page.pageSize;//用服务端数据校正客户端数据参数
                        }).catch(err=>{
                            layer.close(loadIdx);
                        }).finally(()=>{
                            layer.close(loadIdx);
                        });

                    }
                });
            }

        },

        mounted() {
            this.goPage(1);
        }

    };

    Vue.createApp(app).mount('#app')

</script>

</body>
</html>